<jsp:directive.page contentType="text/html;charset=utf-8" />
<%@ include file="/taglibs.jsp" %>

<head>
	<title>${trade.title}</title>
</head>
<body>
	<ul class="breadcrumb">
	  <li><a href="${ctx}">Home</a> <span class="divider">/</span></li>
	  <li><a href="${ctx}/trade!list.action?trade.product.primaryCategory.id=${trade.product.primaryCategory.primaryParentCategory.id}">
	  	${trade.product.primaryCategory.primaryParentCategory.name}</a> <span class="divider">/</span></li>
	  <li><a href="${ctx}/trade!list.action?trade.product.primaryCategory.id=${trade.product.primaryCategory.id}" 
	  		class="active">${trade.product.primaryCategory.name}</a></li>
	</ul>
	<div class="page-header">
	  <h3>[${trade.tradeType.name}] ${trade.title}
	  <small>Published: <s:property value="trade.lastModifiedDate" /> &nbsp; Viewed <s:property value="trade.viewedCount" /> times.</small>
	  </h3>
	</div>

	<%-- modal-gallery is the modal dialog used for the image gallery --%>
	<div id="modal-gallery" class="modal modal-gallery hide fade modal-fullscreen" tabindex="-1">
	    <div class="modal-header">
	        <a class="close" data-dismiss="modal">&times;</a>
	        <h3 class="modal-title"></h3>
	    </div>
	    <div class="modal-body"><div class="modal-image"></div></div>
	    <div class="modal-footer">
        <a class="btn modal-download" target="_blank">
            <i class="icon-download"></i>
            <span>Download</span>
        </a>
        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="2000">
            <i class="icon-play icon-white"></i>
            <span>Slideshow</span>
        </a>
	    </div>
	</div>	
	
	<%-- Only display the primary image and hidden others --%>
	<s:if test="trade.product.productImages != null">
		<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery" class="pull-left">
			<ul class="thumbnails">
				
				<s:iterator value="trade.product.productImages" status="rowstatus" var="pi">
					<s:if test="#rowstatus.first">
						<li class="span3">
					</s:if>
					<s:else>
						<%-- hidden the other images--%>
						<li class="span2 hidden">
					</s:else>
					  <div class="thumbnail" >
					  	<a href="${image.originalImageUrl}" rel="gallery" 
					  		title="<s:text name='module.common.image'/> (${rowstatus.count}/${trade.product.productImages.size()})">
					    	<img src="${image.mediumImageUrl}" alt="${image.uploadedFileName}">
					    </a>
					  </div>
					</li>
				</s:iterator>
			
			</ul>
		</div>
	</s:if>
	
	<dl class="dl-horizontal dl-narrow span3">
	  <dt><s:text name="module.trade.price"/></dt>
	  <dd class="text-error"><strong>${trade.price}￥</strong></dd>
	  <s:iterator value="trade.product.productFeatureAppl">
	  	<dt>${feature.featureType.name}</dt>
	  	<dd>${feature.name}</dd>
	  </s:iterator>
	  <dt>${trade.geoCity.geoType.name}</dt>
	  <dd>${trade.geoCity.name}</dd>
	  <dt>${trade.geoBusinessArea.geoType.name}</dt>
	  <dd>${trade.geoBusinessArea.name}</dd>
	</dl>
	<dl class="dl-horizontal dl-narrow span2">
	  <dt><s:text name="module.trade.contact"/></dt>
	  <dd>${trade.contact}
  			<c:if test="${trade.commercialFlag=='Y'}">
				[商家]
			</c:if>
	  </dd>	  
	  <dt><s:text name="module.trade.phone"/></dt>
	  <dd>${trade.phone}</dd>
	  <dt><s:text name="module.trade.im"/></dt>
	  <dd>${trade.im}</dd>
	 </dl>


<div class="clearfix"></div>
	
<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab"><s:text name="module.trade.detailedDescription"/></a></li>
    <li><a href="#tab2" data-toggle="tab"><s:text name="module.trade.comments"/></a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
     ${trade.product.longDescription}
    </div>
    <div class="tab-pane" id="tab2">
    </div>
  </div>
</div>	




</body>
